<template>
	<div class='add-div'>
		<!--收件人信息-->
		<div class='itemlist margin_top30 send-info-div'>
			<form>
				<ul>
					<li>
						<view class="jiheader">
							<span class='title'>收件人信息</span>
							<span class='zhantie' @click='AICopy'>智能粘贴</span>
						</view>
					</li>
					<li>
						<input type="text" v-model='sendInfo.name' placeholder="寄件人姓名"/>
					</li>
					<li>
						<input type="number" v-model='sendInfo.tele' placeholder="手机号/固定电话"/>
					</li>
					<li>
						<input type="text" v-model='sendInfo.address' placeholder="选择地址" />
						<span class='iconfont icon-you' @click='chooseAddr'></span>
					</li>
					<li>
						<textarea type="text" auto-height v-model='sendInfo.detail_addr' placeholder="请输入详细地址:街道、路、小区、单元"/>
					</li>
				</ul>
				<button size="mini" @click='resetForm'>重置</button>
			</form>
		</div>
		<!--从卫星总导入我的地址信息-->
		<!-- #ifdef MP-WEIXIN -->
		<p class='import-addr margin_top30 padding10' @click='importFromWX'>导入微信中我的地址信息</p>
		<!-- #endif -->
		
		<!--按钮组-->
		<div class='btn-div' @click='saveAddress'>
			<span class='save'>{{btnTxt}}</span>
		</div>
	</div>
</template>

<script>
import {getClipboardData,showToast,checkPhone,checkHtml,post} from '../../../utils/index.js';
import {saveAddrUrl} from '../../../config.js';
import {mapGetters} from 'vuex';
export default{
	data(){
		return {
			sendInfo: {
				name: '',  //姓名
				tele: '',   //电话
				address: '',   //地址
				detail_addr: '',  //详细地址
			},
			btnTxt: '',  //保存按钮的文字
			aid: '',  //地址id
			isMine: false,  //是否是我的地址
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad(){
		let queryJson = this.$mp.query;
		let aid = queryJson.aid;
		let isMine = queryJson.mine==1? true: false;
		this.isMine = isMine;
		if(!aid){
			let title,btnTxt;
			if(isMine){
				title = '新增地址';
				btnTxt = '新增地址';
			}else{
				title = '新建收件人';
				btnTxt = '新增我的收件人';
			};
			uni.setNavigationBarTitle({
				title: title
			});
			this.aid = '';
			this.btnTxt = btnTxt;
		}else{
			let title,btnTxt;
			if(isMine){
				title = '编辑地址';
				btnTxt = '保存地址';
			}else{
				title = '编辑收件人';
				btnTxt = '保存我的收件人';
			};
			uni.setNavigationBarTitle({
				title: title
			});
			this.aid = aid;
			this.btnTxt = btnTxt;
			this.sendInfo = { 
				name: queryJson.name, //姓名
				tele: queryJson.phone,  //电话
				address: queryJson.address, //省市区
				detail_addr: queryJson.detail, //详细地址信息
			};
		}
	},
	methods: {
		//选择地址
		chooseAddr(){
			var self = this;
			uni.chooseLocation({
				success(res){
					self.sendInfo.address = res.address;
					self.sendInfo.detail_addr = res.name;
				}
			});
		},
		//重置表格
		resetForm(){
			this.sendInfo = { 
				name: '', //姓名
				tele: '',  //电话
				address: '', //省市区
				detail_addr: '', //详细地址信息
			};
		},
		//保存收件地址
		saveAddress(){
			var self = this;
			if(!this.sendInfo.name || !this.sendInfo.tele ||
				!this.sendInfo.address || !this.sendInfo.detail_addr){
				showToast('请将信填写完整');
				return;
			};
			if(checkHtml(this.sendInfo.name)){
				showToast('名字中包含非法字符');
				this.sendInfo.name = '';
				return;
			};
			if(!checkPhone(this.sendInfo.tele)){
				showToast('电话输入不规范');
				return;
			};
			if(checkHtml(this.sendInfo.address)){
				showToast('地址中包含非法字符');
				this.sendInfo.address = '';
				return;
			};
			if(checkHtml(this.sendInfo.detail_addr)){
				showToast('详细地址中包含非法字符');
				this.sendInfo.detail_addr = '';
				return;
			};
			
			let dataObj = {
				session_token: self.userInfo.session_token,
				uname: self.sendInfo.name,
				telephone: self.sendInfo.tele,
				address: self.sendInfo.address,
				detail_addr: self.sendInfo.detail_addr,
			};
			let isAdd = !!!this.aid;  //是否是新增地址
			if(!isAdd){  //是编辑，修改
				dataObj.id = this.aid;
			};
			if(self.isMine){
				dataObj.mine = self.isMine;
			};
			post(saveAddrUrl, dataObj)
			.then((res)=>{
				if(res.code==200){
					let msg = isAdd? '新增成功': '修改成功';
					showToast(msg, 'success');
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
						self.resetForm();
					},1500);
				}else{
					showToast(res.errMsg);
				}
			});
		},
		//智能粘贴
		AICopy(){
			let self = this;
			getClipboardData()
			.then((res)=>{
				var dataArr = res.split('\n');
				if(dataArr.length==1){
					showToast('剪贴板内容不合规');
					return;
				}else{
					self.sendInfo = { 
						name: dataArr[0], //姓名
						tele: dataArr[1],  //电话
						address: dataArr[2], //省市区
						detail_addr: dataArr[3], //详细地址信息
					};
				}
			})
			.catch(()=>{});
		},
		//导入微信中的地址
		//#ifdef MP-WEIXIN
		importFromWX(){
			var self = this;
			uni.chooseAddress({
				success(res){
					self.sendInfo = { 
						name: res.userName, //姓名
						tele: res.telNumber,  //电话
						address: res.provinceName+' '+res.cityName+' '+res.countyName, //省市区
						detail_addr: res.detailInfo, //详细地址信息
					};
				}
			});
		}
		//#endif
	}
}
</script>

<style lang="less" scoped>
@import '../../../style/default.less';
/**寄件人信息**/
.itemlist{
	padding: 0 20upx;
	box-sizing: border-box;
	background: #fff;
	form{
		overflow: hidden;
		ul{
			li{
				min-height: 60upx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #e5e5e5;
				.jiheader{
					width: 100%;
					height: 80upx;
					display: flex;
					align-items: center;
					.title{
						flex: 1;
						margin-left: 10upx;
					}
					.zhantie{
						color:#007AFF;
					}
				}
				input{
					flex:1;
				}
				span.iconfont{
					font-size: 40upx;
				}
			}
		}
		button{
			margin: 20upx 20%;
			width: 60%;
			border: 1px solid #007AFF;
			color: #007AFF;
			background: #fff;
		}
	}
}
/*导入微信中地址*/
.import-addr{
	text-align: right;	
	color: #007AFF;
}
/**按钮组**/
.btn-div{
	position: fixed;
	width: 100%;
	height: 80upx;
	bottom: 0;
	display: flex;
	text-align: center;
	z-index:2;
	span{
		flex:1;
		color: #fff;
		line-height: 80upx;
		font-size: 30upx;
	}
	span.save{
		background: @mainColor;
	}
}
</style>
